@import './variables.less';
@import '../../style/mixins.less';

.fnx-image {
	display: inline-block;
	position: relative;

	&--round {
		overflow: hidden;
		border-radius: 50%;

		img {
			border-radius: inherit;
		}
	}

	&__img,
	&__error,
	&__loading {
		display: block;
		width: 100%;
		height: 100%;
	}

	&__error,
	&__loading {
		display: flex;
		position: absolute;
		left: 0;
		top: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.fnx-icon {
			display: block;
		}
	}

	&__loading {
		color: var(--fnx-image-loading-text-color);
		font-size: var(--fnx-image-loading-font-size);
		background-color: var(--fnx-image-loading-background-color);

		.fnx-icon {
			color: var(--fnx-image-loading-icon-color);
			font-size: var(--fnx-image-loading-icon-size);
		}
	}

	&__error {
		color: var(--fnx-image-error-text-color);
		font-size: var(--fnx-image-error-font-size);
		background-color: var(--fnx-image-error-background-color);

		.fnx-icon {
			color: var(--fnx-image-error-icon-color);
			font-size: var(--fnx-image-error-icon-size);
		}
	}
}
